<template>
    <div style="height: 100vh;">
        <!-- 顶部导航栏 -->
        <div class="top-nav" style="height: 100px; background-color: white; display: flex; align-items: center; justify-content: space-between; padding: 0 20px;">
            <div class="logo" style="display: flex; align-items: center;">
                <img src="image/login/DADARecipes.jpg" alt="Logo" style="height: 100px;width: auto;background-color: white;"@click="navigatorIndex">
<!--                <span style="margin-left: 10px; font-size: 24px; font-weight: bold; white-space: nowrap;">达达菜谱</span>-->

            </div>
            <el-menu
                    mode="horizontal"
                    background-color="white"
                    text-color="black"
                    active-text-color="#C0C0C0"
                    router
                    :collapse-transition="false"
                    :ellipsis="false"
                    style="height: 100px;width:300px; justify-content: center;"
            >
                <el-menu-item index="/index" style="font-size: 18px;margin: 0px 30px;">首页</el-menu-item>
                <el-menu-item index="/user" style="font-size: 18px;margin: 0px 30px;">用户</el-menu-item>
                <el-menu-item index="/community" style="font-size: 18px;margin: 0px 30px;">社区</el-menu-item>
                <el-menu-item index="/shop" style="font-size: 18px;margin: 0px 30px;">商城</el-menu-item>
            </el-menu>
            <el-dropdown trigger="click" class="user-dropdown">
                <span class="dropdown-trigger" style="cursor: pointer; white-space: nowrap;font-size: 20px;font-weight: bold;">
                    {{user.username}}
                    <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>

        <!-- 主体内容区域 -->
        <div class="content" style="padding: 20px;">
            <!-- 主体内容 -->
            <router-view></router-view>
        </div>
    </div>
</template>

<script setup>
import { ElMenu, ElMenuItem, ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus';
import {onMounted, ref} from 'vue';
import router from "@/router";

const user = ref(getUser());


// 退出登录功能
const logout = () => {
    if (confirm('您确认要退出登录吗?')) {
        // 退出时要清空用户数据
        localStorage.removeItem('user');
        // 退出后要去到登录页
        window.location.href = '/login';
        // 也需要把已经取出来的 user 对象清空
        user.value = '';
    }
};
const navigatorIndex=()=>{
    router.push("/index")
}
</script>

<style scoped>
.top-nav {
    height: 80px;
    background-color:#efe9dd;
    display: flex;
    align-items: center;
    justify-content: space-between; /* 左右对齐 */
    padding: 0 20px;
}

.logo {
    /* 添加这一行来设置logo容器的背景颜色，使其与导航栏颜色一致 */
    background-color: #efe9dd;
    display: flex;
    align-items: center;
}

/* 确保图片覆盖容器的背景颜色，仅当图片背景不透明时适用 */
.logo img {
    width: auto; /* 或指定宽度以避免拉伸 */
    height: 60px;
    display: block; /* 防止图片下方出现空隙 */
}

.logo span {
    margin-left: 10px;
    font-size: 24px;
    font-weight: bold;
    white-space: nowrap;
}

.user-dropdown {
    display: flex;
    align-items: center;
}

.dropdown-trigger {
    display: flex;
    align-items: center;
    font-size: 16px;
    color: black;
    white-space: nowrap;
    margin-left: 10px;
}

.dropdown-trigger .el-icon-arrow-down {
    margin-left: 5px;
}

.content {
    padding: 20px;
    height: calc(100% - 80px); /* 减去顶部导航栏的高度 */
    overflow-y: auto;
}
</style>
